import React from 'react';
import {connect} from 'dva'
import moment from 'moment'

import Title from 'components/Title'
import Chart from 'components/Chart'
import Tools from 'utils/tools';

import { config } from 'utils';
const { scada } = config;
const { DdToken } = scada;

@connect(({watermeter}) => ({...watermeter}))
class StatisticsAlarmPie extends React.Component {
  echartsConf = {
      chart: {
        type: 'Pie', dataSource: 'StationAlarmResourceUnique_Pie',
        other: { formatType: 'onlyPercent' },
        // color: ['#4482ff', '#e73e3e'],
        columns: {
          name: '',
          field: [{name: 'name', value: 'value'}]
        }
      },
      legend: { isShow: false }, // 自定义legend
      server: {
        type: 'watermeter/queryStationAlarm',
        payload: { Token: DdToken, dvs: [], type: 'Unique_Pie' }
      },
  };
  echartsColumns = ['离线','抄见率低', '倒流']
  // echartsColumns = ["抄见率低", "离线", "倒流", "离线报警", "零水量", "水量递减"]
     
  constructor(props) {
    super(props);

    let time;
    if ('defaultValue' in props) {
      time = props.defaultValue;
    }
    this.state = {
      time,
    };
  }

  componentDidMount() {
    this.init();
  }

  init = () => {
    this.setDateECharts()
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.defaultValue !== nextProps.defaultValue) {
      if (nextProps.defaultValue) {
        this.setState({
          time: nextProps.defaultValue
        }, () => {
          this.init()
        })
      }
    }
  }

  // 图表
  setDateECharts = () => {
    const { server } = this.echartsConf;
    this.queryServer(server);
  }
  // 处理echarts配置请求
  queryServer = async (server) => {
    const { time: year } = this.state;
    const begin = moment(year).startOf('year').unix();
    const end = moment(year).endOf('year').unix();

    let { payload } = server;
    Object.assign(payload, {
      begin,
      end
    })
    Object.assign(server, { payload })
    await this.props.dispatch(server);
  }
 

  // 图表渲染
  render() {
    const { props, echartsConf, echartsColumns } = this;
    const { StationAlarmLoading } = props;
    const { type: chartType, dataSource, color, columns, other } = echartsConf.chart;
    const Resource = Tools.countAlarm(props[dataSource], echartsColumns)

    return (<Title title={'异常类型分类'}>
      <Chart
        type={chartType}
        color={color}
        columns={columns}
        dataSource={Resource}
        other = {other}
      />
    </Title>)
  }
}

export default StatisticsAlarmPie;
